<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>
      div {
        margin: 10px 20px;
        text-align: left;
      }
      label {
        display: inline-block;
        width: 80px;
        text-align: left;
      }
      span {
        color: red;
      }
      .footer {
        margin-left: -4px;
      }
      .tip {
        color: red;
        font-size: 14px;
      }
      .salary {
        margin: 10px 0;
      }
      .form-group {
        margin-bottom: 15px;
      }
      .code {
        background-color: #e6e6fa;
        padding: 3px 5px;
        color: blue;
        border: 1px solid #ccc;
      }
      .refresh {
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <h4 style="color: blue">欢迎注册会员</h4>

    <div id="login">
      <form action="uu.html" method="get">
        <div>
          <label for="phone">手机号码：</label>

          <input
            type="tel"
            id="phone"
            name="phone"
            maxlength="11"
            placeholder="11位手机号"
            required
          />

          <span>必填</span>
        </div>

        <div>
          <label for="pwd">密码：</label>
          <input
            type="password"
            id="pwd"
            name="pwd"
            maxlength="8"
            placeholder="8位密码"
            required
          />

          <span>必填</span>
        </div>

        <div>
          <label for="em">注册邮箱：</label>

          <input
            type="email"
            id="em"
            name="em"
            placeholder="例如:wustzz@sina.com"
            required
          />

          <span>必填</span>
        </div>

        <div id="captcha" class="form-group">
          <label for="captchaInput">验证码：</label>
          <input type="text" id="captchaInput" name="captchaInput" />
          <span class="code">UJFg</span>
          <button type="button" id="refreshBtn" class="refresh">刷新</button>
        </div>

        <div>
          <label for="sexMale">性别：</label>
          <input type="radio" name="sex" id="sexMale" value="male" />男
          <input type="radio" name="sex" id="sexFemale" value="female" />女
        </div>

        <div>
          <label for="brith">生日：</label>
          <input type="date" name="brith" id="brith" />
        </div>

        <div>
          <label for="year">年龄：</label>
          <input type="number" name="year" id="year" min="1" max="200" />
        </div>

        <div>
          籍贯：

          <select name="province" size="1">
            <option value="0" selected>湖北省</option>
            <option value="1">湖南省</option>
            <option value="2">江西省</option>
            <option value="3">广东省</option>
          </select>

          <select name="city" size="1">
            <option value="0" selected>武汉</option>
            <option value="1">孝感</option>
            <option value="2">咸宁</option>
            <option value="3">黄冈</option>
          </select>
        </div>

        <div>
          个人学历：

          <select name="education" size="1" style="width: 110px">
            <option value="0" selected>本科</option>
            <option value="1">硕士</option>
            <option value="2">高中</option>
            <option value="3">初中</option>
          </select>
        </div>

        <div class="form-group">
          <label for="salary">月薪：</label>
          <input
            type="range"
            name="salary"
            id="salary"
            min="0"
            max="10000"
            step="10"
            value="5000"
          />
          
          <span id="salaryDisplay"></span>
        </div>

        <div>
          个人爱好：
          <label><input type="checkbox" name="hobby" value="sing" />唱歌</label>
          <label><input type="checkbox" name="hobby" value="run" />跑步</label>
          <label><input type="checkbox" name="hobby" value="swim" />游泳</label>
        </div>

        <div>
          <label for="photo">个人照片：</label>
          <input type="file" name="photo" id="photo" />
          
        </div>

        <div>
          <label for="intro">个人简介：</label>
          <br />

          <textarea name="intro" id="intro" cols="30" rows="10"></textarea>
        </div>

        <div class="footer">
          <input type="submit" value="提交" />
          <input type="reset" value="重填" />
        </div>
      </form>
    </div>

    <script>
      const slider = document.querySelector('input[type="range"]');
      const salaryDisplay = document.getElementById("salaryDisplay");
      slider.addEventListener("input", function () {
        salaryDisplay.textContent = this.value;
        
      });
    </script>
  </body>
</html>
